<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/data/jaxb" >
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{../lib/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{../css/okadmin.css}">
    <link rel="stylesheet" th:href="@{../font/iconfont.css}">
    <link rel="stylesheet" th:href="@{../lib/nprogress/nprogress.css}">
</head>
<body>
<div class="ok-body">
    <okToolbar style="height: 30px;">
        <a class="layui-btn layui-btn-sm ok-refresh" href="javascript:location.replace(location.href);" title="刷新">
            <i class="layui-icon layui-icon-refresh"></i>
        </a>
    </okToolbar>
    <div>
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
    </div>
</div>
<!--js逻辑-->
<script th:src="@{../lib/layui/layui.js}"></script>
<script th:src="@{../lib/nprogress/nprogress.js}"></script>
<script>
    NProgress.start();
    window.onload = function () {
        NProgress.done();
    }

    layui.config({
        base: '../lib/layui_plugins/'
    }).extend({
        treetable: 'treetable/treetable'
    }).use(['element', 'table', 'form', 'jquery', 'laydate', 'treetable'], function () {
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;
        var treetable = layui.treetable;

        layer.load(2);

        var renderTable = function (){
            treetable.render({
                id : 'publishTable',
                treeColIndex: 1,
                treeSpid: "0",
                treeIdName: 'id',
                treePidName: 'pId',
                elem: '#tableId',
                url: 'treeTable',
                skin: 'line',
                even: true,
                size: 'sm',
                page: false,
                cols: [[
                    {type: 'radio', id : 'id', hide : true},
                    {field : 'entity', width: '80%', title: '模板名称'},
                    {width: '20%', align: 'center', title: '操作',
                        templet: function (d) {
                            if(d.leaf === true){
                                return document.getElementById("operationTpl").innerHTML;
                            }else{
                                return "";
                            }
                        }
                    }
                ]],
                done: function (res, curr, count) {
                    layer.closeAll('loading');
                    $("#countNum").text(count);
                    treetable.foldAll("#tableId");
                }
            });
        }

        renderTable();

        form.on('submit(search)', function () {
            layer.msg('正在查询，请稍后...');
            return false;
        });

        table.on('tool(tableFilter)', function (obj) {
            var layEvent = obj.event;
            if (layEvent === 'publish') {
                $.ajax({
                    url : "doIt",
                    method : "post",
                    dataType : "json",
                    data : {
                        template : obj.data.entity
                    },
                    success : function(result){
                        if(result.success == true){
                            layer.msg("发布成功!", {icon: 6, time: 1000, anim: 4});
                        }
                    },
                    error : function(){
                        layer.msg("发布失败!", {icon: 6, time: 1000, anim: 4});
                    }
                });
            }else if (layEvent === 'preview') {
                window.open("/preview/" + obj.data.entity);
            }
        });

    })

</script>
<!--模板-->
<script type="text/html" id="operationTpl">
    <a href="javascript:;" class="ok-row-operate" title="预览" lay-event="preview">
        <i class="layui-icon layui-icon-play"></i>
    </a>
    <a href="javascript:;" class="ok-row-operate" title="发布" lay-event="publish">
        <i class="layui-icon layui-icon-upload"></i>
    </a>
</script>
</body>
</html>